<template>
  <n-space vertical :size="12">
    <n-data-table
      id="table"
      :bordered="false"
      :single-line="false"
      :columns="columns"
      :data="data"
      :pagination="pagination"
    />
  </n-space>
</template>

<script>
import { h, defineComponent } from 'vue'
import { NTag, NButton, useMessage } from 'naive-ui'

const createColumns = ({ sendMail }) => {
  return [
    {
      title: 'Tags',
      key: 'tags',
      render(row) {
        const tags = row.tags.map((tagKey) => {
          return h(
            NTag,
            {
              style: {
                marginRight: '6px',
              },
              type: 'info',
            },
            {
              default: () => tagKey,
            }
          )
        })
        return tags
      },
    },
    {
      title: '任务名称',
      key: 'task_name',
    },
    {
      title: '任务类型',
      key: 'task_type',
    },
    {
      title: '可提交(次)',
      key: 'times',
    },
    {
      title: '金额',
      key: 'account',
    },
    {
      title: '日期',
      key: 'date',
    },

    {
      title: 'Action',
      key: 'actions',
      render(row) {
        return h(
          NButton,
          {
            size: 'small',
            onClick: () => sendMail(row),
          },
          { default: () => '打开' }
        )
      },
    },
  ]
}

const createData = () => [
  {
    key: 0,
    task_name: '垃圾回收',
    task_type: '分类',
    times: '1',
    account: 1,
    date: '2022-01-01',
    tags: ['nice'],
  },
  {
    key: 1,
    task_name: '商品识别',
    task_type: '打框',
    times: '2',
    account: 2,
    date: '2022-01-02',
    tags: ['wow'],
  },
  {
    key: 2,
    task_name: '人脸识别',
    task_type: '打点',
    times: '2',
    account: 3,
    date: '2022-01-03',
    tags: ['cool'],
  },
]

export default defineComponent({
  setup() {
    const props = defineProps(['tasks'])
    const message = useMessage()
    return {
      data: createData(),
      columns: createColumns({
        sendMail(rowData) {
          message.info('send mail to ' + rowData.task_name)
        },
      }),
      pagination: {
        pageSize: 10,
      },
    }
  },
})
</script>

<style lang="scss" scoped>
#table {
  width: 90%;
}
</style>
